<script setup lang="ts">
import { ref } from 'vue';
import AiFlow from './AiFlow.vue';
import RichChat from './RichChat.vue';
import SessionManager from './SessionManager.vue'
import { api } from '@/api/flow-api'

const sessionId = ref('');

const handleSessionSelect = (id: string) => {
  sessionId.value = id;
}

</script>

<template>
  <header>
  </header>
  <main>
    <AiFlow class="flow-container" :api="api">
      <template #chat-dialog="props">
        <el-dialog v-model="props.visible" width="80%" class="rich-chat-dialog"  @close="props.onClose">
          <div class="dialog-content-container">
        <SessionManager :flowId="props.id" class="session-manager-panel" :api="api" @onSessionSelect="handleSessionSelect"/>
        <RichChat :visible="props.visible" :id="props.id" :sessionId="sessionId" :api="api" class="chat-panel"/>
        </div>
        </el-dialog>
      </template>
    </AiFlow>
  </main>
</template>

<style scoped>
:global(body) {
  height: 100vh;
}

header {
  line-height: 1.5;
}

main {
  width: 100%;
  height: 100%;
}

.flow-container {
  width: 100%;
  height: 100%;
}

.rich-chat-dialog {
    --el-dialog-margin-top: 10vh;
    /* 设置为你想要的值，如 5vh、20px 等 */
}

/* 添加布局样式 */
.dialog-content-container {
  display: flex;
  gap: 16px;
  height: 80vh; /* 设置固定高度或使用flex-1填充对话框 */
}

.session-manager-panel {
  flex: 0 0 300px; /* 固定宽度300px */
  border-right: 1px solid #e5e7eb;
}

.chat-panel {
  flex: 1; /* 占据剩余空间 */
  min-width: 0; /* 防止内容溢出 */
  height: 100%;
}
</style>
